<script>

import KCard from '@/components/KCard'
import Profile from './components/Profile'
import EmployeeOverview from './components/EmployeeOverview'
import Turnover from './components/Turnover'
import Ranking from './components/Ranking'
import RecentVisitor from './components/RecentVisitor.vue'
import EducationLevelStatistics from './components/EducationLevelStatistics.vue'
import SalaryStatistics from './components/SalaryStatistics.vue'

import { examScoreRanking } from '@/api/dashboard'
import { statistics, employeeOverview } from '@/api/v2/dashboard'

export default {
  components: {
    KCard,
    EmployeeOverview,
    Profile,
    Turnover,
    Ranking,
    RecentVisitor,
    SalaryStatistics,
    EducationLevelStatistics
  },
  props: {},
  data() {
    return {
      employeeOverview: {
        loading: false,
        data: null
      },
      charts: {
        turnover: {
          loading: false,
          data: null
        },
        educationLevel: {
          loading: false,
          data: null
        },
        salary: {
          loading: false,
          data: null
        }
      },
      statisticsBox: {
        height: '278px'
      }
    }
  },
  computed: {
    employeeOverviewFormatted() {
      if (this.employeeOverview.data === null) return []
      const {
        entry,
        formal,
        leave,
        mobilize,
        onJob
      } = this.employeeOverview.data
      return [
        {
          key: 'employee',
          icon: 'employee',
          label: '在职员工',
          value: onJob
        },
        {
          key: 'waiting_for_Induction',
          icon: 'waiting_for_Induction',
          label: '待入职',
          value: entry
        },
        {
          key: 'waiting_to_be_regular_worker',
          icon: 'waiting_to_be_regular_worker',
          label: '待转正',
          value: formal
        },
        {
          key: 'waiting_for_transfer',
          icon: 'waiting_for_transfer',
          label: '实习人员',
          value: mobilize
        },
        {
          key: 'waiting_for_depart',
          icon: 'waiting_for_depart',
          label: '已离职',
          value: leave
        }
      ]
    },
    turnoverFormatted() {
      if (this.charts.turnover.data === null) return []
      const employeeCount = this.employeeOverview?.data?.onJob ?? 0

      const data = this.charts.turnover.data
      const keys = Object.keys(data)
      const result = []

      const labelFormatter = (n) => {
        const month = parseInt(n)
        return month > 9 ? `${month}` : `0${month}`
      }

      const valueForamtter = (v) => {
        const value = parseInt(v)
        const res = value / employeeCount * 100
        return isNaN(res) ? 0 : res
      }

      for (const key of keys) {
        const { entry, dimission } = data[key]

        result.push({
          label: labelFormatter(key),
          data: [
            {
              label: '入职',
              data: valueForamtter(entry)
            },
            {
              label: '离职',
              data: valueForamtter(dimission)
            }
          ]
        })
      }
      return result
    }
  },
  watch: {},
  created() {
    this.initData()
  },
  methods: {
    chartsLoadingStatus(loading) {
      this.charts.turnover.loading = loading
      this.charts.educationLevel.loading = loading
      this.charts.salary.loading = loading
    },
    async getEmployeeOverview() {
      const result = await employeeOverview()
        .catch(err => {
          throw new Error(err?.response?.data?.message ?? '获取员工概览失败')
        })

      if (result.code !== 200) { throw new Error('获取员工概览失败') }

      this.employeeOverview.data = result.data
    },
    async getStatistics() {
      this.chartsLoadingStatus(true)

      const result = await statistics()
        .catch(err => {
          throw new Error(err?.response?.data?.message ?? '获取统计数据失败')
        })

      if (result.code !== 200) { throw new Error('获取统计数据失败') }

      console.log(result)

      const { education, person, salary, sevenDay } = result.data

      this.charts.educationLevel.data = education
      this.charts.salary.data = salary
      this.charts.turnover.data = person

      this.chartsLoadingStatus(false)
    },

    async loadData() {
      Promise.allSettled([
        this.getEmployeeOverview(),
        this.getStatistics()
      ])
    },
    async initData() {
      await this.loadData()
    }
  }
}
</script>

<template>
  <div class="dashboard-container">
    <!-- Header -->
    <el-row :gutter="32">

      <!-- Left -->
      <el-col
        :xs="24"
        :sm="16"
        :md="17"
        class="vertical-space"
      >

        <!-- Overview -->
        <EmployeeOverview
          :loading="employeeOverview.loading"
          :data="employeeOverviewFormatted"
        />
      </el-col>

      <!-- Body -->
      <el-col
        :xs="24"
        :sm="8"
        :md="7"
        class="vertical-space"
      >

        <!-- Profile -->
        <Profile />
      </el-col>
    </el-row>

    <!-- Body -->
    <el-row :gutter="32">
      <el-col
        :xs="24"
        :sm="16"
        :md="17"
      >

        <!-- Charts -->
        <el-row :gutter="30">
          <el-col
            :xs="24"
            :md="12"
            class="vertical-space"
          >
            <Turnover
              :loading="charts.turnover.loading"
              :data="turnoverFormatted"
            />
          </el-col>

          <el-col
            :xs="24"
            :md="12"
            class="vertical-space"
          >
            <RecentVisitor
              height="292px"
            />
          </el-col>
        </el-row>
      </el-col>

      <el-col
        :xs="24"
        :sm="8"
        :md="7"
        class="vertical-space"
      >

        <!-- Ranking -->
        <Ranking
          :height="statisticsBox.height"
        />

      </el-col>
    </el-row>
    <el-row :gutter="30">

      <el-col
        :xs="24"
        :md="12"
        class="vertical-space"
      >
        <EducationLevelStatistics
          :loading="charts.educationLevel.loading"
          :data="this.charts.educationLevel.data"
          :height="statisticsBox.height"
        />
      </el-col>

      <el-col
        :xs="24"
        :md="12"
        class="vertical-space"
      >
        <SalaryStatistics
          :loading="charts.salary.loading"
          :data="charts.salary.data"
          :height="statisticsBox.height"
        />
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss">
    .dashboard-container {
      background-color: #fff;
        padding: 32px;

        .vertical-space {
            margin-bottom: 30px;
        }
    }
</style>
